<style>
    .layui-form-item {margin-bottom: 0px!important;}
    .layui-form-label{width:120px!important;}
    .layui-form-onswitch {border-color: #ae4af7;background-color: #ae4af7;}
    .layui-form-radio>i:hover, .layui-form-radioed>i {color: #ae4af7;}
    .layui-form-switch{border: 1px solid #ae4af729;}
    .layui-collapse{margin:2px;}
</style>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body" pad15>
          <div class="layui-form" lay-filter="setmyinfo">
            <!--折叠窗口-->
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">评论设置<i class="layui-icon layui-colla-icon"></i></h2>
                    <div class="layui-colla-content">
                        <div class="layui-form-item">
                          <label class="layui-form-label">评论间隔</label>
                          <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="message_reply" value="" autocomplete="off" placeholder="" class="layui-input">
                          </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">邮件回复</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="system_mail_hh" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">全站评论功能</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="system_message" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">显示评论等级</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="comment_level" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">评论内容显示@</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="comment_has_at" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">评论显示系统及浏览器信息</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="comment_show_ua" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">评论显示IP归属地</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="comment_show_ip" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">显示站长IP归属地</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="comment_dont_show_owner_ip" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">评论头像延迟加载</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="basic_img_lazy_a" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">轮播图设置<i class="layui-icon layui-colla-icon"></i></h2>
                    <div class="layui-colla-content">
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">首页幻灯片</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="index_carousel" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">幻灯片鼠标滚动</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="index_carousel_mousewheel" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">隐藏幻灯片标题</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="index_carousel_hide_title" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">幻灯片循环播放</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="index_carousel_loop" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">幻灯片播放速度（毫秒）</label>
                          <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="index_carousel_autoplay_speed" value="" autocomplete="off" placeholder="" class="layui-input">
                          </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">切换效果</label>
                            <div class="layui-input-inline" style="width: 200px;" id="mess-fenlei">
                              <script type="text/html" template lay-url="" lay-done="layui.form.render('select');" lay-data="">
                                <select name="index_carousel_switch_effect" id="index_carousel_switch_effect" >
                                 <option value="">默认效果</option>
                                 <option value="fade">淡入淡出</option>
                                 <option value="cube">立方体</option>
                                 <option value="flip">快速翻转</option>
                                 <option value="coverflow">覆盖流</option>
                                 <option value="cards">卡片样式</option>
                                </select>
                              </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">文章设置<i class="layui-icon layui-colla-icon"></i></h2>
                    <div class="layui-colla-content">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章样式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="post_style" value="list" lay-filter="post_style" title="列表样式"checked="">
                                <input type="radio" name="post_style" value="card" lay-filter="post_style" title="卡片样式">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章阅读量</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="hide_post_views" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章首行缩进</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="post_content_indent" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章海报生成</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="post_poster_open" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章版权说明</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="page_copy_right" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章底部推荐</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="page_b_recommend" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章侧目录生成</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="use_post_menu" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">文章图片延迟加载</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="basic_img_lazy_s" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">内链接新标签打开</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="link_blank_content" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">关于我们<i class="layui-icon layui-colla-icon"></i></h2>
                    <div class="layui-colla-content">
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">启用</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="footer_about_open" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">标题</label>
                          <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="footer_about_title" value="" autocomplete="off" placeholder="" class="layui-input">
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <label class="layui-form-label">内容</label>
                          <div class="layui-input-block" style="width: 500px;">
                            <textarea name="footer_about" placeholder="请输入内容，可直接输入代码！" class="layui-textarea"></textarea>
                          </div>
                        </div>
            
                    </div>
                </div>
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">版权声明<i class="layui-icon layui-colla-icon"></i></h2>
                    <div class="layui-colla-content">
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">启用</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="footer_copyright_open" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">标题</label>
                          <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="footer_copyright_title" value="" autocomplete="off" placeholder="" class="layui-input">
                          </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                          <label class="layui-form-label">内容</label>
                          <div class="layui-input-block" style="width: 500px;">
                            <textarea name="footer_copyright" placeholder="请输入内容，可直接输入代码！" class="layui-textarea"></textarea>
                          </div>
                        </div>
            
                    </div>
                </div>
            </div>
            <div class="layui-collapse" lay-accordion>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">公告设置<i class="layui-icon layui-colla-icon"></i></h2>
                    <div class="layui-colla-content">
                        <div class="layui-form-item mess-fenlei">
                            <label class="layui-form-label">启用</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="global_notice" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                            </div>
                        </div>
                        <div class="layui-form-item">
                          <label class="layui-form-label">滚动速度（毫秒）</label>
                          <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="global_notice_autoplay_speed" value="" autocomplete="off" placeholder="" class="layui-input">
                          </div>
                        </div>
            
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">加载动画</label>
                <div class="layui-input-inline" style="width: 200px;" id="mess-fenlei">
                  <script type="text/html" template lay-url="" lay-done="layui.form.render('select');" lay-data="">
                    <select name="loading" id="loading" >
                     <option value="1">默认动画</option>
                     <option value="2">加载进度条</option>
                     <option value="3">加载齿轮</option>
                     <option value="4">粒子动画</option>
                    </select>
                  </script>
                </div>
            <label class="layui-form-label">站点主色调</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="style_color_primary" value="" placeholder="请选择颜色" class="layui-input" id="color-form-input">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="color-form"></div>
                </div>
                
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">默认主题模式</label>
                <div class="layui-input-block">
                    <input type="radio" name="theme_light" value="light" lay-filter="theme_light" title="高亮模式"checked="">
                    <input type="radio" name="theme_light" value="dark" lay-filter="theme_light" title="暗黑模式">
                </div>
            </div>
            <div class="layui-form-item mess-fenlei">
                <label class="layui-form-label">全站变成灰色</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="system_grey" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                </div>
            </div>
            <div class="layui-form-item mess-fenlei">
                <label class="layui-form-label">全局无刷新加载</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="page_ajax_load" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                </div>
            </div>
            <div class="layui-form-item mess-fenlei">
                <label class="layui-form-label">全局侧边栏显示</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="hide_global_sidebar" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                </div>
            </div>
            <div class="layui-form-item mess-fenlei">
                <label class="layui-form-label">导航栏毛玻璃效果</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="nav_blur" lay-text="打开|关闭" lay-skin="switch" lay-filter="switch_system_open">
                </div>
            </div>
            <div class="layui-form-item mess-fenlei">
                <label class="layui-form-label">页面模块加载动画</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="page_animate" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                </div>
            </div>
            <div class="layui-form-item mess-fenlei">
                <label class="layui-form-label">全站图片延迟加载</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="basic_img_lazy_z" lay-text="打开|隐藏" lay-skin="switch" lay-filter="switch_system_open">
                </div>
            </div>
            
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="setmyinfo">提交</button>
                <!-- <button type="reset" class="layui-btn layui-btn-primary">重新填写</button> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
layui.use(['form', 'upload','colorpicker','element'], function (exports) {
    var $ = layui.$
    , layer = layui.layer
    , laytpl = layui.laytpl
    , setter = layui.setter
    , view = layui.view
    , admin = layui.admin
    , form = layui.form
    , upload = layui.upload
    , lang = layui.data('lang').lang
    ,colorpicker = layui.colorpicker;
    var $body = $('body');
    group = lang;
    //根据下拉菜单展示不同的内容
    var $ = layui.$
    form.render();
    layui.element.render('collapse');   //折叠面板
    var index = layer.load({ shade: [0.4, '#def'], icon: '&#xe63d' });
    $(".layui-form").hide();
    $.ajax({
      url: '/api/setting/getSettingList',
      type: "GET",
      dataType: 'json',
      data: {
        group: group,
      },
      success: function (res) {
        if (res.code == 0) {   
            if(res.data.comment_dont_show_owner_ip == 'on'){res.data.comment_dont_show_owner_ip = 'on';}else{res.data.comment_dont_show_owner_ip = '';}
            if(res.data.comment_has_at == 'on'){res.data.comment_has_at = 'on';}else{res.data.comment_has_at = '';}
            if(res.data.comment_level == 'on'){res.data.comment_level = 'on';}else{res.data.comment_level = '';}
            if(res.data.comment_show_ip == 'on'){res.data.comment_show_ip = 'on';}else{res.data.comment_show_ip = '';}
            if(res.data.comment_show_ua == 'on'){res.data.comment_show_ua = 'on';}else{res.data.comment_show_ua = '';}
            if(res.data.index_carousel == 'on'){res.data.index_carousel = 'on';}else{res.data.index_carousel = '';}
            if(res.data.index_carousel_hide_title == 'on'){res.data.index_carousel_hide_title = 'on';}else{res.data.index_carousel_hide_title = '';}
            if(res.data.index_carousel_loop == 'on'){res.data.index_carousel_loop = 'on';}else{res.data.index_carousel_loop = '';}
            if(res.data.basic_img_lazy_a == 'on'){res.data.basic_img_lazy_a = 'on';}else{res.data.basic_img_lazy_a = '';}
            if(res.data.basic_img_lazy_s == 'on'){res.data.basic_img_lazy_s = 'on';}else{res.data.basic_img_lazy_s = '';}
            if(res.data.basic_img_lazy_z == 'on'){res.data.basic_img_lazy_z = 'on';}else{res.data.basic_img_lazy_z = '';}
            if(res.data.use_post_menu == 'on'){res.data.use_post_menu = 'on';}else{res.data.use_post_menu = '';}
            if(res.data.footer_about_open == 'on'){res.data.footer_about_open = 'on';}else{res.data.footer_about_open = '';}
            if(res.data.global_notice == 'on'){res.data.global_notice = 'on';}else{res.data.global_notice = '';}
            if(res.data.link_blank_content == 'on'){res.data.link_blank_content = 'on';}else{res.data.link_blank_content = '';}
            if(res.data.hide_global_sidebar == 'on'){res.data.hide_global_sidebar = 'on';}else{res.data.hide_global_sidebar = '';}
            if(res.data.footer_copyright_open == 'on'){res.data.footer_copyright_open = 'on';}else{res.data.footer_copyright_open = '';}
            if(res.data.block_not_tran == 'on'){res.data.block_not_tran = 'on';}else{res.data.block_not_tran = '';}
            if(res.data.system_grey == 'on'){res.data.system_grey = 'on';}else{res.data.system_grey = '';}
            if(res.data.system_message == 'on'){res.data.system_message = 'on';}else{res.data.system_message = '';}
            if(res.data.system_mail_hh == 'on'){res.data.system_mail_hh = 'on';}else{res.data.system_mail_hh = '';}
            if(res.data.nav_blur == 'on'){res.data.nav_blur = 'on';}else{res.data.nav_blur = '';}
            if(res.data.hide_post_views == 'on'){res.data.hide_post_views = 'on';}else{res.data.hide_post_views = '';}
            if(res.data.post_content_indent == 'on'){res.data.post_content_indent = 'on';}else{res.data.post_content_indent = '';}
            if(res.data.page_ajax_load == 'on'){res.data.page_ajax_load = 'on';}else{res.data.page_ajax_load = '';}
            if(res.data.page_animate == 'on'){res.data.page_animate = 'on';}else{res.data.page_animate = '';}
            if(res.data.page_copy_right == 'on'){res.data.page_copy_right = 'on';}else{res.data.page_copy_right = '';}
            if(res.data.post_poster_open == 'on'){res.data.post_poster_open = 'on';}else{res.data.post_poster_open = '';}
            if(res.data.page_b_recommend == 'on'){res.data.page_b_recommend = 'on';}else{res.data.page_b_recommend = '';}
            if(res.data.index_carousel_mousewheel == 'on'){res.data.index_carousel_mousewheel = 'on';}else{res.data.index_carousel_mousewheel = '';}
            $("input[name=theme_light][value=light]").attr("checked", res.data.UserSex == 1 ? true : false);
            $("input[name=theme_light][value=dark]").attr("checked", res.data.UserSex == 2 ? true : false);
            $("input[name=post_style][value=list]").attr("checked", res.data.UserSex == 1 ? true : false);
            $("input[name=post_style][value=card]").attr("checked", res.data.UserSex == 2 ? true : false);
            
            form.val("setmyinfo", res.data);
            // form.render();
            $(".layui-form").show();
            layer.close(index);
            // 颜色选择器
            colorpicker.render({
                elem: '#color-form'
                ,color: res.data.style_color_primary
                ,done: function(color){
                    $('#color-form-input').val(color);
                }
            });
        }
      }
    });
    form.render();
    form.on('submit(setmyinfo)', function (obj) {
      var buttonObj = $(this);
      //提交修改
      console.log(obj);
      console.log(JSON.stringify(obj.field));
      $(this).html('正在提交...').addClass('layui-btn-disabled');
      admin.req({
        url: '/api/Setting/myUpdate/group/' + layui.data('lang').lang
        , data: obj.field
        , success: function (res) {
          layer.msg(res.msg, { icon: 1, time: 800 });
          if (res.code == 0) {
            buttonObj.html('提交').removeClass('layui-btn-disabled');
          } else {
          }
        }
      });
      return false;
    });
    //快捷管理
    form.on('switch(switch_system_open)', function (obj) {
        $.post('/api/Setting/editShu', {
            value:  obj.elem.checked,
            category: obj.elem.name,
        }, function (data) {
            layer.msg(data.msg ? data.msg : '保存失败！');
        });
    }); 
});
</script>